<script setup>
import BaseButton from '@/components/base/BaseButton.vue'
import BaseInput from '@/components/base/BaseInput.vue'
import EmailCodeInput from '@/components/auth/EmailCodeInput.vue'
import uniForms from '@dcloudio/uni-ui/lib/uni-forms/uni-forms.vue'
import uniFormsItem from '@dcloudio/uni-ui/lib/uni-forms-item/uni-forms-item.vue'
import { ref } from 'vue'
import { register } from '@/api/login'
import useLocale from '@/composables/useLocale'
import useLocaleNavigationBarTitle from '@/composables/useLocaleNavigationBarTitle'

const formData = ref({
    email: '',
    captcha: '',
    password: '',
    confirmPassword: '',
})
const formRef = ref(null)
const { t } = useLocale()
useLocaleNavigationBarTitle('register')

const fields = {
    email: {
        placeholder: t('pleaseEnterEmail'),
        component: BaseInput,
        type: 'email',
        rules: [
            {
                required: true,
                errorMessage: t('pleaseEnterEmail'),
            },
            {
                format: 'email',
                errorMessage: t('pleaseEnterValidEmail'),
            },
        ],
    },
    captcha: {
        placeholder: t('pleaseEnterCode'),
        component: EmailCodeInput,
        rules: [
            {
                required: true,
                errorMessage: t('pleaseEnterCode'),
            },
        ],
    },
    password: {
        placeholder: t('pleaseEnterPassword'),
        component: BaseInput,
        password: true,
        type: 'password',
        rules: [
            {
                required: true,
                errorMessage: t('pleaseEnterPassword'),
            },
        ],
    },
    confirmPassword: {
        placeholder: t('pleaseConfirmPassword'),
        component: BaseInput,
        password: true,
        type: 'password',
        rules: [
            {
                required: true,
                errorMessage: t('pleaseConfirmPassword'),
            },
            {
                validateFunction: function (rule, value, data, callback) {
                    if (data.confirmPassword !== data.password) {
                        callback(t('passwordsNotMatch'))
                    }
                    return true
                },
            },
        ],
    },
}

async function handleRegister() {
    try {
        const data = await formRef.value.validate()
        const resp = await register({
            phoneOrEmail: data.email,
            captcha: data.captcha,
            sendType: 1,
            password: data.password,
        })
        if (resp.status === 200) {
            uni.showToast({
                title: t('registerSuccess'),
                icon: 'success',
            })
            uni.redirectTo({
                url: '/pages/auth/login-by-email',
            })
        }
    } catch (_) {
        /* empty */
    }
}
</script>

<template>
    <view class="flex justify-center px-8">
        <view class="flex w-full max-w-96 flex-col gap-3 pt-20">
            <uni-forms ref="formRef" :model-value="formData">
                <uni-forms-item
                    v-for="({ rules, ...attrs }, name) in fields"
                    :key="name"
                    :rules="rules"
                    :name="name"
                >
                    <EmailCodeInput
                        v-if="name === 'captcha'"
                        v-bind="attrs"
                        v-model="formData[name]"
                        :email="name === 'captcha' ? formData.email : undefined"
                    />
                    <BaseInput v-else v-bind="attrs" v-model="formData[name]" />
                </uni-forms-item>
            </uni-forms>
            <BaseButton @click="handleRegister">{{ t('register') }}</BaseButton>
        </view>
    </view>
</template>
